<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    table{
      margin: 100px auto;
      width: 800px;
      text-align: center;
      border-collapse: collapse;
      font-size: 14px;
    }
    thead tr{
      height: 30px;
      background-color: skyblue;
    }
    tbody td{
      border-bottom: 1px solid #d7d7d7;
      font-size: 12px;
      color: blue;
      height: 40px;
    }
    .bg{
      background-color: lightgoldenrodyellow;
    }

  </style>
</head>
<body>
<table>
  <thead>
  <tr>
    <th>代码</th>
    <th>名称</th>
    <th>最新公布值</th>
    <th>累计值</th>
    <th>增长率</th>

  </tr>
  </thead>
  <tbody>
  <tr>
    <td>003526</td>
    <td>农银金穗</td>
    <td>1.078</td>
    <td>1.079</td>
    <td>+0.024</td>
  </tr>
  <tr>
    <td>003526</td>
    <td>农银金穗</td>
    <td>1.078</td>
    <td>1.079</td>
    <td>+0.024</td>
  </tr>
  <tr>
    <td>003526</td>
    <td>农银金穗</td>
    <td>1.078</td>
    <td>1.079</td>
    <td>+0.024</td>
  </tr>
  <tr>
    <td>003526</td>
    <td>农银金穗</td>
    <td>1.078</td>
    <td>1.079</td>
    <td>+0.024</td>
  </tr>
  </tbody>
</table>
<script>
  var trs=document.querySelector('tbody').querySelectorAll('tr');
  for(var i=0;i<trs.length;i++){
    trs[i].onmousemove=function () {
      this.className='bg';
    }
    trs[i].onmouseout=function(){
      this.className='';
    }
  }
</script>
</body>
</html>